import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
export default {
  install (app) {
    app.directive('imglazy', {
      mounted (el, binding) {
        const { stop } = useIntersectionObserver(
          // 监听目标元素
          el,
          ([{ isIntersecting }], observerElement) => {
            // targetIsVisible.value = isIntersecting
            // console.log('正在观察', isIntersecting)
            if (isIntersecting) {
              // 当图片url无效加载失败的时候使用默认图片替代  给img元素绑定error事件
              el.onerror = function () {
                el.src = defaultImg
              }
              // console.log(222)
              el.src = binding.value
              stop() // 进入视口则停止observe 给img赋予地址 赖加载实现
            }
          },
          // 进入当前元素可视区域的比例是多少才执行回调 0-1 值越大 代表需要进入的面积越大
          { threshold: 0 }
        )
      }
    })
  }
}
